import { onMounted, onUnmounted, reactive, ToRefs, toRefs } from "vue"

interface ILocation {
  x: number
  y: number
}

export function useMouse(): ToRefs<ILocation> {
  const state = reactive<ILocation>({
    x: 0,
    y: 0
  })
  const update = (e: { pageX: number; pageY: number }) => {
    state.x = e.pageX
    state.y = e.pageY
  }
  onMounted(() => {
    window.addEventListener("mousemove", update)
  })

  onUnmounted(() => {
    window.removeEventListener("mousemove", update)
  })

  return toRefs(state)
}
